<template>
  <view class="ding">
    <view id="icon">

      <u-icon name="arrow-left" color="#2979ff" size="18" @click="xiangceneirong"></u-icon>
    </view>
    <view>相册</view>
    <view style="color: blue;" @click="icon">取消</view>
  </view>
  <view class="img" v-for="item in secondData" :key="item.id">

    <img @click="previewImg(item.img_url)" :src="item.img_url" class="image">


  </view>
</template>

<script  setup lang="ts">

import { ref } from "vue";
const icon = () => {
  uni.navigateBack({
    delta: 1
  })
}
const xiangceneirong = () => {
  uni.navigateBack({
    delta: 1
  })
}

const secondData = ref([
  { id: '1', img_url: '/static/img/tupian.png', },
  { id: '2', img_url: '/static/img/tupian.png', },
  { id: '3', img_url: '/static/img/tupian.png', },
  { id: '4', img_url: '/static/img/tupian.png', },
  { id: '5', img_url: '/static/img/tupian.png', },
  { id: '6', img_url: '/static/img/tupian.png', },
  { id: '7', img_url: '/static/img/tupian.png', },
  { id: '8', img_url: '/static/img/tupian.png', },
  { id: '9', img_url: '/static/img/tupian.png', },
  { id: '10', img_url: '/static/img/tupian.png', },
  { id: '11', img_url: '/static/img/tupian.png', },
  { id: '12', img_url: '/static/img/tupian.png', },
  { id: '13', img_url: '/static/img/tupian.png', },
  { id: '14', img_url: '/static/img/tupian.png', },
  { id: '15', img_url: '/static/img/tupian.png', },
  { id: '16', img_url: '/static/img/tupian.png', },
  { id: '17', img_url: '/static/img/tupian.png', },
  { id: '18', img_url: '/static/img/tupian.png', },
  { id: '19', img_url: '/static/img/tupian.png', },
  { id: '20', img_url: '/static/img/tupian.png', },
  { id: '21', img_url: '/static/img/tupian.png', },
  { id: '22', img_url: '/static/img/tupian.png', },
  { id: '23', img_url: '/static/img/tupian.png', },
  { id: '24', img_url: '/static/img/tupian.png', },
  { id: '25', img_url: '/static/img/tupian.png', },
  { id: '26', img_url: '/static/img/tupian.png', },
  { id: '27', img_url: '/static/img/tupian.png', },
  { id: '28', img_url: '/static/img/tupian.png', },
  { id: '29', img_url: '/static/img/tupian.png', },
  { id: '30', img_url: '/static/img/tupian.png', },
  { id: '31', img_url: '/static/img/tupian.png', },
  { id: '32', img_url: '/static/img/tupian.png', },

])
const previewImg = (current: any) => {
  uni.previewImage({
    current: current,
    urls: secondData.value.map(item => item.img_url)
  })
}

</script>
<style lang="scss">
.ding {
  margin-top: 40px;
  justify-content: space-between;
  padding: 10px 10px;
  display: flex;
}


image {
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  border: 5px solid #eee;
}
</style>